<!--学习主页.连接员-->
<script setup lang="ts">

import LearnSteps from "../components/learn/LearnSteps.vue";
import {type LearnStepsDatas} from "../types/learnStepsData";
import GroupButtonsTwo from "../components/common/GroupButtonsTwo.vue";
import {ref, onMounted} from "vue";
import LearnCourseware from "../components/learn/LearnCourseware.vue";
import PracticalTraining from "../components/learn/PracticalTraining.vue";
import LearnCheck from "../components/learn/LearnCheck.vue";

import {useRoute,useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const mainTopIndexNavigation = ref<string | null>(null);
onMounted(() => {
  console.log(route, 44);
  // 检查并获取 mainTopIndexNavigation 参数
  if (route.query.mainTopIndexNavigation) {
    console.log(route.query.mainTopIndexNavigation, 666);
    if (Array.isArray(route.query.mainTopIndexNavigation)) {
      mainTopIndexNavigation.value = route.query.mainTopIndexNavigation[0];
    } else {
      mainTopIndexNavigation.value = route.query.mainTopIndexNavigation;
    }
    console.log(mainTopIndexNavigation.value, 'ddddddddddd')
  } else {
    // console.error('mainTopIndexNavigation 参数未定义');
  }
});

let listLearnStepDatas: LearnStepsDatas = [
  {
    ///标题
    title: '初级连接员必学',
    ///当前的Index
    index: 0,
    ///是否是当前步骤
    current: 1,
    lastIndex: false,
  },
  {
    ///标题
    title: '中级连接员必学',
    ///当前的Index
    index: 1,
    ///是否是当前步骤
    current: 1,
    lastIndex: false,
  },
  {
    ///标题
    title: '高级连接员必学',
    ///当前的Index
    index: 2,
    ///是否是当前步骤
    current: 1,
    lastIndex: true,
  },
];

let buttonGroupTwo = ref([
  {label: '西安站', selected: true},
  {label: '延安车务段', selected: false},
  {label: '榆林站', selected: false},
]);

// const selectedIndexPage: any = ref(0);
const clickHandler = (selectedIndex: number, upRoute: boolean) => {
  // selectedIndexPage.value = selectedIndex
  buttonGroupTwo.value.forEach((e, index) => {
    e.selected = false;
    if (index === selectedIndex) {
      e.selected = true;
    }
  },);

  if (upRoute) {
    updateRoute(selectedIndex)
  }

  // switch (num){
  //   case 0:
  //     break;
  //   case 1:
  //     break;
  //   case 2:
  //     break;
  //   case 3:
  //     break;
  // }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      stationIndex: index,
    },
  });
};

onMounted(()=>{
  const stationIndex = Array.isArray(route.query.stationIndex)
      ? route.query.stationIndex[0]
      : route.query.stationIndex;
  console.log(stationIndex, 'stationIndex');
  // 解析为整数
  const index = parseInt(stationIndex, 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHandler(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', stationIndex);
  }
});

</script>

<template>
  <div style="display: flex;flex-direction: row">
    <div style="margin-top: 20px;margin-left: 20px;width: 300px">
      <RouterView></RouterView>
    </div>
    <div style="margin-top: 20px;margin-right: 20px;margin-left: 20px">
      <LearnSteps :listData="listLearnStepDatas"></LearnSteps>
      <GroupButtonsTwo :buttons="buttonGroupTwo" style="width: max-content;margin-top: 30px"
                       @ccc="clickHandler"></GroupButtonsTwo>
      <LearnCourseware></LearnCourseware>
      <PracticalTraining style="margin-top: 20px"></PracticalTraining>
      <LearnCheck></LearnCheck>
    </div>
  </div>
</template>

<style scoped>

</style>